<template>
	<public-view :isTabbar="true" navType="circle">
		<view class="content">
			<view class="top-tab flex a-i-c">
				<view class="item f-s-30 flex j-c-c" :class="tab_index === 0?'f-w-b color-333':'color-999'" @click="changeTabIndex(0)">
					最新
					<view class="tab-bottom-line" v-if="tab_index === 0"></view>
				</view>
				<view class="item f-s-30 flex j-c-c" :class="tab_index === 1?'f-w-b color-333':'color-999'" @click="changeTabIndex(1)">
					最热
					<view class="tab-bottom-line" v-if="tab_index === 1"></view>
				</view>
			</view>
			<view class="circle-list-box flex f-d-c"> 
				<block v-for="(item, index) in list" :key="index">
					<circle-box @playVideo="playFullScreen" :item="item" @updata="getCircelList"></circle-box>
				</block>
			</view>
		</view>
	</public-view>
	<view class="" v-if="show_video" style="width: 750rpx;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999;">
		<view class="video-mask">
			
		</view>
		<view class="color-fff" style="position: absolute;z-index: 100;right: 50rpx;" @click="closeVi" :style="{top:paddingTop}">
			关闭
		</view>
		<dom-video style="position: absolute;z-index: 10;" ref="playVideo" :src="video_src" :autoplay="true" :loop="false" :controls="true"></dom-video>
	</view>
</template>

<script>
	import circleBox from "@/components/myComponents/circleBox.vue"
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	export default {
		components:{
			"circle-box":circleBox,
			"dom-video":isDomVideo
		},
		data() {
			return {
				tab_index:0,
				page:1,
				keyword:"",
				list:[],
				video_src:"",
				show_video:false,
				paddingTop:0
			}
		},
		onLoad() {
			this.initNavBar()
		},
		onShow() {
			this.$setNotice()
			this.getCircelList()
		},
		onReachBottom() {
			this.page++
			this.getCircelList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getCircelList()
		},
		methods: {
			initNavBar(){
				let sys = uni.getSystemInfoSync()
				this.paddingTop = sys.statusBarHeight+'px'
			},
			closeVi(){
				this.show_video = false
				this.$refs.playVideo.stop()
			},
			playFullScreen({url}) {
				// this.$refs[id][0].play()
				// console.log(this.$refs['fullScreen'+index])
				this.video_src = url
				this.show_video = true
				this.$refs.playVideo.play()
			  // var videoContext = uni.createVideoContext(id, this);
			  // videoContext.play();
			  // videoContext.requestFullScreen();
			},
			getCircelList(){
				let that = this
				that.util.postRequest({
					url:"v1/content/socialize",
					data:{
						type:that.tab_index,
						page:that.page,
						keyword:"",
						rows:10
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.list = that.list.concat(res.data.data)
						}else{
							that.page --
						}
					}
					uni.stopPullDownRefresh()
				}).catch(e=>[
					uni.stopPullDownRefresh()
				])
			},
			changeTabIndex(type){
				this.tab_index = type
				this.page = 1
				this.list = []
				this.getCircelList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-mask{
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	.circle-list-box{
		width: 100%;
		padding: 20upx 0;
		
	} 
	.top-tab{
		width: 100%;
		padding: 20upx 30upx;
		.item{
			position: relative;
			margin-right: 40upx;
			.tab-bottom-line{
				position: absolute;
				bottom: -12upx;
				width: 36upx;
				height: 6upx;
				border-radius: 3upx;
				background: #2567F3;
			}
		}
	}
	.content{
		width: 750upx;
	}
</style>
